<template>
	<view :style="{background:isBackground()}" class="chat-item ss-flex justify-between align-center ss-p-x-20" @click="jump">
		<view class="chat-item-image ss-m-r-24">
			<image :src="showAvatar()" mode="aspectFill"></image>
			<view class="dot" v-if="data.no_read_num > 0">
				<view v-if="data.no_read_num > 99" class="infos">99+</view>
				<view v-else class="info">{{ data.no_read_num }}</view>
			</view>
		</view>
		<view class="chat-item-text ss-flex flex-column justify-between align-start ss-p-y-18">
			<view class="chat-item-top ss-flex justify-between align-center">
				<text class="chat-item-name ss-flex-1 ss-line-1">{{ showName() }}</text>
				<text class="chat-item-time">{{ TimeString(data.lastMessage.lastTime) }}</text>
			</view>
			<view class="chat-item-content ss-line-1">
				<text v-if="data.lastMessage.type === 'TIMTextElem'">
					{{ data.lastMessage.messageForShow }}
				</text>
				<text v-if="data.lastMessage.type === 'TIMImageElem'">[图片]</text>
				<text v-if="data.lastMessage.type === 'TIMSoundElem'">[语音]</text>
				<text v-if="data.lastMessage.type === 'TIMVideoFileElem'">[视频]</text>
				<text v-if="data.lastMessage.type === 'TIMFaceElem'">[表情]</text>
				<text v-if="data.lastMessage.type === 'TIMCustomElem'">
					{{data.lastMessage.messageForShow}}
				</text>
			</view>
		</view>
	</view>
</template>

<script setup>
	import sheep from '@/sheep';
	import $store from '@/im/store/im';
	
	const emit = defineEmits(['resetSwipe'])

	const props = defineProps({
		data: {
			type: Object,
			default: {}
		},
		showType: {
			type: String,
			default: ''
		}
	})

	const jump = () => {
		setTimeout(() => {
			if (props.data.type === "platform") {
				// 服务助手
				$store().getChatInfo(`C2C${props.data.platform_im_id}`, 'chat', props.data.platform_im_id)
			} else if (props.data.type === 'single') {
				// 单聊
				$store().getChatInfo(`C2C${props.data.peer_im_id}`, 'chat', props.data.peer_im_id)
			} else {
				// 群聊
				$store().getChatInfo(`GROUP${props.data.group_id}`, 'group', props.data.group_id)
			}
			if (props.showType !== 'system') {
				emit('resetSwipe')
			}
		}, 300)
		$store().setUnread(props.data.no_read_num)
		props.data.no_read_num = 0
		$store().unreadNum = $store().unreadNum - props.data.no_read_num
	}


	// 展示的背景色
	const isBackground = () => {
		return props.showType === 'system' ? '' : props.data.top === 1 ? '#F3F3F3' : ''
	}
	
	// 展示的昵称
	const showName = () => {
		const eNum = {
			'system': props.data.name,
			'single': props.data.nickname,
			'group': props.data.title
		}
		return eNum[props.showType]
	}

	// 展示的头像
	const showAvatar = () => {
		const defaultSingleAvatar = 'https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/static/img/default_avatar.png';
		const defaultGroupAvatar = 'https://liuliangbenben.oss-cn-hangzhou.aliyuncs.com/storage/qita/20250419/377eab5ddaeab94d81f9eefa9a2aa475.png';
		const eNum = {
			'system': props.data.img,
			'single': props.data.avatar || defaultSingleAvatar,
			'group': props.data.face_url || defaultGroupAvatar
		}
		return eNum[props.showType]
	}

	const TimeString = (time) => {
		if (time) {
			const dateTime = new Date(time.replace(' ', 'T'));
			const timestamp = dateTime.getTime() / 1000; // 转换为秒级时间戳
			return sheep.$helper.timeFrom(timestamp)
		}
		return ''
	}
</script>

<style scoped lang="scss">
	view {
		box-sizing: border-box;
	}

	.chat-item {
		width: 100%;
		height: 125rpx;
		overflow: hidden;

		.chat-item-image {
			width: 90rpx;
			height: 90rpx;
			position: relative;

			image {
				width: 90rpx;
				height: 90rpx;
				border-radius: 8rpx;
			}

			.dot {
				position: absolute;
				right: -10rpx;
				top: -10rpx;

				.infos {
					width: 62rpx;
					height: 30rpx;
					background: #FF3434;
					border-radius: 18rpx;
					font-size: 22rpx;
					text-align: center;
					line-height: 30rpx;
					color: #fff;
				}

				.info {
					width: 30rpx;
					height: 30rpx;
					font-size: 22rpx;
					border-radius: 50%;
					background-color: red;
					color: #fff;
					text-align: center;
					line-height: 30rpx;
				}
			}
		}

		.chat-item-text {
			flex: 1;
			height: 100%;
			border-bottom: 1rpx solid #EDEDED;

			.chat-item-top {
				width: 100%;
			}

			.chat-item-name {
				font-weight: 400;
				font-size: 32rpx;
				color: #333333;
			}

			.chat-item-time {
				font-weight: 350;
				font-size: 24rpx;
				color: #666666;
			}

			.chat-item-content {
				width: 100%;
				font-weight: 350;
				font-size: 24rpx;
				color: #666666;
			}
		}
	}
</style>